<template>
  <div class="authorityA">
    <div class="authorityA-top">
      <el-button type="success" class="iconfont icon-jishiben"></el-button>
      <el-button type="info" class="">推出</el-button>
    </div>
    <CrumbsC :arr="arr"></CrumbsC>
    <el-button type="primary" style="margin-top: 20px">添加角色</el-button>
    <el-table border :data="tableData" style="width: 100%; margin-top: 20px">
      <el-table-column type="expand">
        <template #default>
          <div
            style="display: flex; border-bottom: 1px solid #ccc; height: 60px; align-items: center"
          >
            <el-tag type="primary" closable>商品管理</el-tag>
            <div style="display: flex">
              <el-tag type="success" closable>商品列表</el-tag>
              <div><el-tag type="danger" closable>添加订单</el-tag></div>
            </div>
          </div>
          <div
            style="display: flex; border-bottom: 1px solid #ccc; height: 60px; align-items: center"
          >
            <el-tag type="primary" closable>商品管理</el-tag>
            <div style="display: flex">
              <el-tag type="success" closable>商品列表</el-tag>
              <div><el-tag type="danger" closable>添加订单</el-tag></div>
            </div>
          </div>
          <div
            style="display: flex; border-bottom: 1px solid #ccc; height: 60px; align-items: center"
          >
            <el-tag type="primary" closable>商品管理</el-tag>
            <div style="display: flex">
              <el-tag type="success" closable>商品列表</el-tag>
              <div><el-tag type="danger" closable>添加订单</el-tag></div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="#" prop="index" />
      <el-table-column label="角色名称" prop="userName" />
      <el-table-column label="角色描述" prop="userAge" />
      <el-table-column label="操作">
        <el-button type="primary" :icon="Edit">编辑</el-button>
        <el-button type="success" :icon="Delete">删除</el-button>
        <el-button type="warning" :icon="Star" @click="dialogVisible = true">分配权限</el-button>
      </el-table-column>
    </el-table>
    <!-- 分配权限 -->
    <el-dialog v-model="dialogVisible" title="分配权限" width="500">
      <div class="custom-tree-node-container">
        <el-tree
          style="max-width: 600px"
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :props="{ class: customNodeClass }"
        />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit, Star } from '@element-plus/icons-vue'
import CrumbsC from '@/components/CrumbsC.vue'
import { ref } from 'vue'
const dialogVisible = ref(false)

interface Tree {
  id: number
  label: string
  isPenultimate?: boolean
  children?: Tree[]
}

const customNodeClass = (data: Tree) => {
  if (data.isPenultimate) {
    return 'is-penultimate'
  }
  return null
}

const data: Tree[] = [
  {
    id: 1,
    label: '商品管理',
    children: [
      {
        id: 4,
        label: '商品列表',
        isPenultimate: true,
        children: [
          {
            id: 9,
            label: '添加商品'
          },
          {
            id: 10,
            label: '商品修改'
          },
          {
            id: 11,
            label: '商品删除'
          },
          {
            id: 12,
            label: '更新商品图片'
          },
          {
            id: 13,
            label: '更新商品属性'
          },
          {
            id: 14,
            label: '更新商品状态'
          },
          {
            id: 15,
            label: '获取商品详情'
          }
        ]
      },
      {
        id: 5,
        label: '分类参数',
        isPenultimate: true,
        children: [
          {
            id: 16,
            label: '获取参数列表'
          },
          {
            id: 17,
            label: '创建商品参数'
          },
          {
            id: 18,
            label: '删除商品参数'
          }
        ]
      },
      {
        id: 6,
        label: '商品分类',
        isPenultimate: true,
        children: [
          {
            id: 19,
            label: '添加分类'
          },
          {
            id: 20,
            label: '删除分类'
          },
          {
            id: 21,
            label: '获取分类详情'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    label: '订单分类',
    isPenultimate: true,
    children: [
      {
        id: 7,
        label: '订单列表',
        children: [
          {
            id: 22,
            label: '添加订单'
          },
          {
            id: 23,
            label: '订单更新'
          },
          {
            id: 24,
            label: '获取订单详情'
          }
        ]
      }
    ]
  },
  {
    id: 3,
    label: '权限管理',
    isPenultimate: true,
    children: [
      {
        id: 8,
        label: '角色列表',
        children: [
          {
            id: 25,
            label: '添加角色'
          },
          {
            id: 26,
            label: '删除角色'
          },
          {
            id: 27,
            label: '角色授权'
          },
          {
            id: 28,
            label: '取消角色授权'
          },
          {
            id: 29,
            label: '获取角色列表'
          },
          {
            id: 30,
            label: '获取角色详情'
          },
          {
            id: 31,
            label: '更新角色信息'
          },
          {
            id: 32,
            label: '更新角色信息'
          },
          {
            id: 33,
            label: '更新角色权限'
          }
        ]
      },
      {
        id: 9,
        label: '权限列表',
        children: [
          {
            id: 34,
            label: '查看权限'
          }
        ]
      }
    ]
  },
  {
    id: 4,
    label: '用户管理',
    children: [
      {
        id: 10,
        label: '用户列表',
        children: [
          {
            id: 35,
            label: '添加用户'
          },
          {
            id: 36,
            label: '删除用户'
          },
          {
            id: 37,
            label: '更新用户'
          },
          {
            id: 38,
            label: '获取用户详情'
          },
          {
            id: 39,
            label: '分配用户角色'
          },
          {
            id: 40,
            label: '设置管理状态'
          }
        ]
      }
    ]
  },
  {
    id: 5,
    label: '数据统计',
    children: [
      {
        id: 11,
        label: '数据报表',
        children: [
          {
            id: 41,
            label: '查看数据'
          }
        ]
      }
    ]
  }
]
//隔开了树
const tableData = ref<any[]>([
  {
    index: 1,
    userName: '张三',
    userAge: 18
  },
  {
    index: 2,
    userName: '李四',
    userAge: 18
  }
])
const arr = ref<any[]>([
  { path: '/', title: '首页' },
  { path: '/home/2-1', title: '权限管理' },
  { path: '/home/2-1', title: '角色列表' }
])
</script>

<style scoped>
@import url('../../../FontCss/IconFontCss.css');
.authorityA-top {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
